<template>
  <div class="YDform">
    <!-- 顶部插槽 -->
    <div class="header">
      <slot name="header"></slot>
    </div>

    <el-form label-width="100px">
      <el-row>
        <div v-for="item in formItems" :key="item.label">
          <el-col v-bind="colLayout">
            <el-form-item
              :label="item.label"
              :rules="item.rules"
              :style="itemStyle"
            >
              <template v-if="item.type === 'input'">
                <el-input :placeholder="item.placeholder" v-model="formData[`${item.field}`]"></el-input>
              </template>

              <template v-else-if="item.type === 'datepicker'">
                <el-date-picker v-bind="item.otherOptions" style="width: 100%" v-model="formData[`${item.field}`]">
                </el-date-picker>
              </template>

              <template v-else-if="item.type === 'select'">
                <el-select :palceholder="item.placeholder" style="width: 100%" v-model="formData[`${item.field}`]">
                  <el-option
                    v-for="option in item.options"
                    :key="option.id"
                    :value="option.value"
                  >
                    {{ option.value }}
                  </el-option>
                </el-select>

              </template>
            </el-form-item>
          </el-col>
        </div>
        
        <div class="handle_button">  <el-button type='primary' size='medium' icon='' @click="handlenewClick">新建</el-button>   
        <el-button icon='' @click="handleQueryClick" >查询</el-button>  
        <el-button icon='' @click="handelResetClick" >重置</el-button>
        </div>
      </el-row>
    </el-form>
     

      <!-- 底部插槽 -->
    <div class="footer">
      <slot name="footer"></slot>
    </div>

  </div>
</template>

<script>
export default {
  beforeUpdate() {
    // console.log(this.formData);
  },
  data() {
    return {};
  },
  props: {
   formData:{
     type:Object,
     required:true,
   },
    formItems: {
      type: Array,
      required: true,
      default: () => [], //默认值是一个数组 就需要加上一个函数来表示
    },

    //label宽度
    labelWidth: {
      type: String,
      default: "100px",
    },

    //item样式
    itemStyle: {
      type: Object,
      default: () => ({
        padding: "10px,40px",
      }),
    },

    //设置响应式布局
    colLayout: {
      type: Object,
      default: () => ({
        xl: 6, // >1920px 4个
        lg: 8,
        md: 12,
        sm: 24,
        xs: 24,
      }),
    },
  },

  components: {},

  methods: {
    //新建按钮
    handlenewClick(){
      this.$emit('newBtnclick')
    },
    //重置按钮   后续会陆续封装修改 先将里面内容赋空
handelResetClick(){
 this.formData.createTime=[];
 this.formData.name='';
 this.formData.status='';
  // console.log(this.formData);
},
//搜索按钮
handleQueryClick(){
   console.log('查询'); 
  //  console.log(Object.values(this.formData));
   console.log(this.formData.createTime);
   console.log(this.formData.name);
   console.log(this.formData.status);

  setTimeout(() => {
    this.handelResetClick()
  }, 200);
}
  },
};
</script>

<style scoped>
.handle_button{
  padding: 10px;
}
</style>